<template>
  <el-dialog
    :title="type == 'add' ? '添加' : '修改'"
    v-model="visible"
    width="400px"
    fullscreen
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="formRef"
      label-width="100px"
      class="good-form"
    >
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
          </div>
        </template>
        <el-form-item label="婚礼名称" prop="weddingName">
          <el-input type="text" v-model="ruleForm.weddingName"></el-input>
        </el-form-item>
        <el-form-item label="版本" hidden>
          <el-input type="text" v-model="ruleForm.version"></el-input>
        </el-form-item>
        <el-form-item label="封面" prop="url">
          <el-upload
            class="avatar-uploader"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            accept="jpg,jpeg,png"
            :show-file-list="false"
            :before-upload="handleBeforeUpload"
            :on-success="handleUrlSuccess"
          >
            <img
              style="width: 100px; height: 100px; border: 1px solid #e9e9e9"
              v-if="ruleForm.url"
              :src="ruleForm.url"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="标题" prop="name">
          <el-input type="text" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <!-- {{ ruleForm }} -->
        <el-form-item label="描述" prop="description">
          <el-input type="textarea" v-model="ruleForm.description"></el-input>
        </el-form-item>
        <el-form-item label="婚礼类型">
        <el-select
          clearable
          placeholder="上级分类"
          v-model="ruleForm.typeId"
          size="small"
          style="width: 200px; margin-right: 10px"
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
        <el-form-item label="上级分类" prop="parentId">
          <el-cascader
            v-model="ruleForm.parentId"
            :options="options"
            placeholder="上级分类"
            clearable
            :props="cascaderProps"
            style="width: 200px; margin-right: 10px"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="标题图" prop="bg">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'bg')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div v-if="ruleForm.bg.length" style="display: flex; flex-wrap: wrap">
            <div
              v-for="(item, index) in ruleForm.bg"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.bg"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'bg')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="排序值" prop="order">
          <el-input-number
            size="medium"
            v-model="ruleForm.order"

          ></el-input-number>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>婚礼视频</span>
          </div>
        </template>
        <el-form-item label="视频" prop="video">
          <el-upload
            class="upload-demo"
            :before-upload="handleVideoBeforeUpload"
            :show-file-list="false"
            :on-success="handleVideoSuccess"
            action="https://www.watabe-wedding.com.cn/mini/api/upload/video"
          >
            <el-button size="small" type="primary" icon="el-icon-upload"
              >点击上传</el-button
            >
          </el-upload>
          <div
            style="display: flex; align-items: flex-end"
            v-show="ruleForm.video"
          >
            <video
              :src="ruleForm.video"
              controls
              width="320"
              height="240"
            ></video>
            <el-button
              size="small"
              @click="handleVideoRemove"
              icon="el-icon-delete"
              style="margin-left: 8px"
              >删除视频</el-button
            >
          </div>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>标题2</span>
          </div>
        </template>
        <el-form-item label="标题" prop="title2">
          <el-input type="text" v-model="ruleForm.title2"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description2">
          <el-input type="textarea" v-model="ruleForm.description2"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgs_2">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_2')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_2.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_2"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_2"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_2')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>标题3</span>
          </div>
        </template>
        <el-form-item label="标题" prop="title3">
          <el-input type="text" v-model="ruleForm.title3"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description3">
          <el-input type="textarea" v-model="ruleForm.description3"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgs_3">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_3')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_3.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_3"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_3"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_3')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>基础信息</span>
          </div>
        </template>
        <el-form-item label="位置信息" prop="title3">
          <el-input type="text" v-model="ruleForm.address"></el-input>
        </el-form-item>
        <el-form-item label="腾讯地图坐标" prop="baiduLocation">
          <el-input type="text" v-model="ruleForm.baiduLocation"></el-input>
          <!-- <a href="https://lbs.qq.com/getPoint/" target="_blank">腾讯地图坐标拾取</a> -->
        </el-form-item>
        <!-- <el-form-item label="容纳人数" prop="peopleNumber">
          <el-input type="text" v-model="ruleForm.peopleNumber"></el-input>
        </el-form-item>
        <el-form-item label="餐食" prop="wanyan">
          <el-input type="text" v-model="ruleForm.wanyan"></el-input>
        </el-form-item>
        <el-form-item label="交通信息" prop="jiaotong">
          <el-input type="text" v-model="ruleForm.jiaotong"></el-input>
        </el-form-item> -->
        <el-form-item
          v-for="(item, index) in ruleForm.more"
          :label="'更多' + index"
          :key="item.key"
          :prop="'more.' + index + '.value'"
        >
          <el-row>
            <el-col :span="6"
              ><el-input v-model="item.title" placeholder="左侧文案"
            /></el-col>
            <el-col :span="16"
              ><el-input v-model="item.description" placeholder="右侧文案"
            /></el-col>
            <el-col :span="2">
              <el-button @click.prevent="removeMore(item)"
                >删除</el-button
              ></el-col
            >
          </el-row>
        </el-form-item>
        <el-button @click="addMore">新增更多</el-button>
        <el-form-item label="图片" prop="imgs_4">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_4')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_4.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_4"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_4"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_4')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>仪式现场</span>
          </div>
        </template>
        <el-form-item label="标题" prop="title4">
          <el-input type="text" v-model="ruleForm.title4"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description4">
          <el-input type="textarea" v-model="ruleForm.description4"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgs_44">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_44')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_44.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_44"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_44"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_44')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="描述2" prop="description4">
          <el-input
            type="textarea"
            v-model="ruleForm.description4_2"
          ></el-input>
        </el-form-item>
        <el-form-item label="轮播图" prop="imgs_444">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_444')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_444.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_444"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_444"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_444')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>酒店</span>
          </div>
        </template>
        <el-form-item label="上面图片" prop="imgs_555">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_555')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_555.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_555"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_555"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_555')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="标题" prop="title5">
          <el-input type="text" v-model="ruleForm.title5"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description5">
          <el-input type="textarea" v-model="ruleForm.description5"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgs_5">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_5')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_5.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_5"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_5"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_5')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="标题2" prop="title55">
          <el-input type="text" v-model="ruleForm.title55"></el-input>
        </el-form-item>
        <el-form-item label="描述2" prop="description55">
          <el-input type="textarea" v-model="ruleForm.description55"></el-input>
        </el-form-item>
        <el-form-item label="图片2" prop="imgs_55">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_55')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_55.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_55"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_55"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_55')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="位置信息标题" prop="hotelLocationTitle">
          <el-input v-model="ruleForm.hotelLocationTitle"></el-input>
        </el-form-item>
        <el-form-item label="位置" prop="hotelLocation">
          <el-input type="textarea" v-model="ruleForm.hotelLocation"></el-input>
        </el-form-item>
        <el-form-item label="腾讯地图坐标" prop="hotelBaiduLocation">
          <el-input
            type="text"
            v-model="ruleForm.hotelBaiduLocation"
          ></el-input>
          <!-- <a href="https://lbs.qq.com/getPoint/" target="_blank">腾讯地图坐标拾取</a> -->
        </el-form-item>
      </el-card>
      <br />
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>婚礼套餐</span>
          </div>
        </template>
        <el-form-item label="查看更多内容" prop="viewMoreContent">
          <el-input type="text" v-model="ruleForm.viewMoreContent"></el-input>
        </el-form-item>
        <el-form-item label="查看更多" prop="viewMore">
          <el-input type="text" v-model="ruleForm.viewMore"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="imgs_6">
          <el-upload
            action="https://www.watabe-wedding.com.cn/mini/api/upload/img"
            list-type="picture-card"
            :before-upload="handleBeforeUpload"
            :show-file-list="false"
            :on-success="(e) => handleUrlsSuccess(e, 'imgs_6')"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div
            v-if="ruleForm.imgs_6.length"
            style="display: flex; flex-wrap: wrap"
          >
            <div
              v-for="(item, index) in ruleForm.imgs_6"
              :key="item"
              style="display: flex; flex-direction: column; align-items: center"
            >
              <el-image
                style="
                  width: 120px;
                  height: 120px;
                  border: 1px solid #e9e9e9;
                  padding: 8px;
                "
                :src="item"
                class="avatar"
                :preview-src-list="ruleForm.imgs_6"
              >
              </el-image>
              <el-button
                @click="handleRemove(index, 'imgs_6')"
                style="margin: 8px"
                type="primary"
                icon="el-icon-delete"
              ></el-button>
            </div>
          </div>
        </el-form-item>
      </el-card>
      <br />
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { reactive, ref, toRefs, nextTick } from "vue";
import axios from "axios";
// import { localGet, uploadImgServer, hasEmoji } from '@/utils'
import { ElMessage } from "element-plus";
import { parseN, StrN } from "../utils/index";

const InitForm = {
  version: 2,
  weddingName: "",
  url: "",
  parentId: "",
  name: "",
  description: "",
  order: 1,
  bg: [],
  imgs: [],
  imgs_2: [],
  imgs_3: [],
  imgs_4: [],
  imgs_44: [],
  imgs_444: [],
  imgs_5: [],
  imgs_55: [],
  imgs_555: [],
  imgs_6: [],
  more: [],
};
export default {
  name: "DialogAddWork",
  props: {
    type: String,
    reload: Function,
    options: Object,
  },
  setup(props) {
    const formRef = ref();
    const state = reactive({
      cascaderProps: {
        value: "id",
        label: "name",
      }, // 树形props
      // uploadImgServer,
      token: localStorage.access_token,
      visible: false,
      ruleForm: InitForm,
      rules: {
        weddingName: [
          { required: "true", message: "不能为空", trigger: ["change"] },
        ],
        url: [{ required: "true", message: "不能为空", trigger: ["change"] }],
        description: [
          { required: "true", message: "不能为空", trigger: ["change"] },
        ],
        order: [{ required: "true", message: "不能为空", trigger: ["change"] }],
        name: [{ required: "true", message: "不能为空", trigger: ["change"] }],
        bg: [{ required: "true", message: "不能为空", trigger: ["change"] }],
        // video: [{ required: "true", message: "不能为空", trigger: ["change"] }],
        // video_title: [
        //   { required: "true", message: "不能为空", trigger: ["change"] },
        // ],
        // video_description: [
        //   { required: "true", message: "不能为空", trigger: ["change"] },
        // ],
        parentId: [
          { required: "true", message: "不能为空", trigger: ["change"] },
        ],
      },
      id: "",
    });
    // 获取详情
    const getDetail = (id) => {
      axios.get(`/api/server/${id}`).then((res) => {
        state.ruleForm = {
          ...state.ruleForm,
          ...StrN(res.data),
        };
      });
    };
    const addMore = () => {
      state.ruleForm.more = [
        ...state.ruleForm.more,
        {
          title: "",
          description: "",
          key: Date.now(),
        },
      ];
    };
    function removeMore(row) {
      state.ruleForm.more = state.ruleForm.more.filter(
        (item) => item.key !== row.key
      );
    }
    const handleBeforeUpload = (file) => {
      const sufix = file.name.split(".")[1] || "";
      if (!["jpg", "jpeg", "png"].includes(sufix)) {
        ElMessage.error("请上传 jpg、jpeg、png 格式的图片");
        return false;
      }
    };
    const handleVideoBeforeUpload = (file) => {
      // const sufix = file.name.split(".")[1] || "";
      // if (!["mp4"].includes(sufix)) {
      //   ElMessage.error("请上传 mp4 格式的视频");
      //   return false;
      // }
    };
    // 上传图片
    const handleUrlSuccess = (val) => {
      console.log("handleUrlSuccess", val);
      state.ruleForm.url = val || "";
    };
    // 上传图片列表
    const handleUrlsSuccess = (val, key) => {
      state.ruleForm[key] = [...state.ruleForm[key], val];
    };
    // 上传视频
    const handleVideoSuccess = (val) => {
      console.log(val);
      state.ruleForm.video = val || "";
    };
    // 图片列表删除
    const handleRemove = (index, key) => {
      state.ruleForm[key].splice(index, 1);
    };
    // 视频删除
    const handleVideoRemove = () => {
      state.ruleForm.video = "";
    };

    // 开启弹窗
    const open = (id) => {
      state.visible = true;
      if (id) {
        state.id = id;
        getDetail(id);
      } else {
        state.ruleForm = InitForm;
      }
    };
    // 关闭弹窗
    const close = () => {
      state.visible = false;
    };
    const submitForm = () => {
      console.log(state.ruleForm)
      formRef.value.validate((valid) => {
        if (valid) {
          // if (hasEmoji(state.ruleForm.link)) {
          //   ElMessage.error('不要输入表情包，再输入就打死你个龟孙儿~')
          //   return
          // }
          if (Array.isArray(state.ruleForm.parentId)) {
            state.ruleForm.parentId =
              state.ruleForm.parentId[state.ruleForm.parentId.length - 1];
          }
          if (props.type == "add") {
            axios({
              method: "post",
              url: "/api/server",
              data: {
                ...parseN(state.ruleForm),
              },
            }).then((res) => {
              console.log(res);
              ElMessage.success("添加成功");
              state.visible = false;
              if (props.reload) props.reload();
            });
          } else {
            axios
              .put("/api/server", {
                ...parseN(state.ruleForm),
              })
              .then(() => {
                ElMessage.success("修改成功");
                state.visible = false;
                if (props.reload) props.reload();
              });
          }
        }
      });
    };
    const resetForm = () => {
      nextTick(() => {
        formRef.value.resetFields();
      });
    };
    return {
      ...toRefs(state),
      typeList: [
        {
          name: '教堂',
          id: 1
        },
        {
          name: '水台',
          id: 2
        },
        {
          name: '草坪',
          id: 4
        },
        {
          name: '京都和婚',
          id: 14
        },
        {
          name: '更多',
          id: 15
        },
      ],
      open,
      close,
      formRef,
      handleBeforeUpload,
      handleVideoBeforeUpload,
      handleUrlSuccess,
      handleUrlsSuccess,
      handleVideoSuccess,
      handleRemove,
      handleVideoRemove,
      submitForm,
      resetForm,
      addMore,
      removeMore,
    };
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  width: 100px;
  height: 100px;
  color: #ddd;
  font-size: 30px;
}
.avatar-uploader-icon {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid #e9e9e9;
  padding: 32px 17px;
}
</style>
